<template>
  <div class="mianfei">
    <h6>
      <img src="../../../assets/img/yl-img/hy/hy-04.jpg" />{{ title}}<span class="ci">猜你想看&nbsp;&nbsp;></span>
    </h6>
    <ul class="caini">
      <li v-for="movie in moviesdata" :key="movie.id" @click="goVideoDetail(movie.id)">
        <img :src="movie.img" >
        <p>{{ movie.name }}</p>
        <span>{{ movie.author }}</span>
      </li>
    </ul> 
  </div>
</template>

<script>
// import axios from "axios";
export default {
  name: "Mianfei",
  props: ["title"],
  data() {
    return {
      movies: [],
      kv: {
        限时免费影厅: "mianfei",
      },
    };
  }, 
  methods:{
    goVideoDetail(movieid){
      this.$router.push("/details/"+movieid)
    }
  },
  // created() {
  //   axios({
  //     url: "/movies",
  //     params: {
  //       type: this.kv[this.title],
  //     },
  //   }).then((res) => (this.movies = res.data));
  // },
  created() {
      this.$store.dispatch("LINK_MIANFEI_DATA","/vip/movies")
      },
      computed:{
        moviesdata(){
          return this.$store.state.VipMianFeiM.movies
        }
    }

};
</script>

<style scoped>
/* 限时免费领取会员 */
.mianfei {
  margin-left: 0.15rem;
}
.caini {
  width: 100%;
  margin-top: 0.12rem;
  /* background-color: red; */
  display: flex;
  white-space: nowrap;
  overflow: auto;
}
.caini::-webkit-scrollbar {
  display: none;
}
h6 {
  font-size: 0.17rem;
  padding-top: 0.3rem;
  width: 100%;
  height: 0.18rem;
  color: white;
  /* background-color: royalblue; */
}
.caini li img {
  width: 1.25rem;
  height: 1.65rem;
}
.caini li {
  margin-right: 0.1rem;
  color: white;
}
.caini li span {
  font-size: 0.12rem;
  color: #828288;
}
.caini li p {
  margin-top: 0.1rem;
  margin-bottom: 0.08rem;
}
.ci {
  float: right;
  margin-right: 0.15rem;
  font-size: 0.11rem;
  color: #babbbf;
  margin-top: 0.06rem;
}
</style>